亚洲伊人久久精品影院,91精品尤物福利国产,欧美特黄一区二区,96久久精品人人妻人人槡

聯(lián)
咨詢(xún)熱線(xiàn):

185-9527-1032

聯(lián)系QQ:

2863379292

官方微信:

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢

建站經(jīng)驗

導讀:引言

發(fā)表日期:2019-03-31

文章編輯:興田科技

瀏覽次數:13204

標簽:

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

引言

我們生活在一個(gè)人機互動(dòng)頻繁,由設備驅動(dòng)的世界中。

隨著(zhù)觸摸屏逐漸成為移動(dòng)設備的標配,多點(diǎn)觸控手勢的廣泛應用,讓我們與手機、平板電腦甚至是筆記本電腦之間建立起了一種更寬廣的聯(lián)系方式。我們通過(guò)模擬真實(shí)世界的手勢與屏幕上的各種元素進(jìn)行互動(dòng),使許多曾經(jīng)不曾想或者不敢想的人機交互方式變成了現實(shí),同時(shí)手勢操作的應用降低了人與物理設備之間的溝通的門(mén)檻。

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

圖0. 嬰兒幾乎無(wú)困難的通過(guò)屏幕玩游戲

我家那位小p孩,不到2歲就已經(jīng)能夠很自然輕松解鎖ipad、翻頁(yè)找到他喜歡玩的熊貓餐廳,接著(zhù)熟練地在各種食材選折他喜歡的,制作一份美味的虛擬美食;而我們也樂(lè )于買(mǎi)各種大屏手機和平板電腦送給我們的長(cháng)輩。移動(dòng)設備及手勢交互方式給我們帶來(lái)革命性體驗和便捷,移動(dòng)的觸控時(shí)代早已到來(lái),您是否也與時(shí)俱進(jìn)了呢?值得我們每一位設計師反思。

一、什么是觸控手勢

觸控手勢是自然用戶(hù)界面(NUI)的一種表現形式。

自然用戶(hù)界面(Naturaluserinterface,NUI)是指一類(lèi)無(wú)形的用戶(hù)界面。NUI則只需要人們以最自然的交流方式(如語(yǔ)言和文字)與機器互動(dòng)。直觀(guān)的說(shuō),使用NUI的設備不需要鍵盤(pán)或鼠標。特別是觸控技術(shù)將使人機交互變得更加自然直觀(guān),更為人性化。

您的手機、平板電腦還有筆記本擁有識別多點(diǎn)觸控輸入的功能來(lái)幫助你實(shí)現對其廣泛的運用。這種輸入方式幫助我們實(shí)現與屏幕內容的交互,而模仿真實(shí)中的操作手勢可以降低我們對操作屏幕對象的認知障礙。

在pC時(shí)代,我們需要他人或者一個(gè)說(shuō)明教程去教會(huì )我們怎么使用鼠標,移動(dòng)屏幕的光標,而這些在現實(shí)世界里幾乎找不到可相映射的東西,然后學(xué)習怎么雙擊打開(kāi)一個(gè)文件,按住一個(gè)文件不放,把它拖動(dòng)到文件夾里面。

觸控手勢帶來(lái)的是自然用戶(hù)界面,支持觸控的移動(dòng)設備能夠自然直觀(guān)的被所有年齡層,不同技能水平的人所使用。使用Multi-Touch多點(diǎn)觸控式接口技術(shù),取代目前所使用的鍵盤(pán)(按鍵)、鼠標,將進(jìn)一步體現出人性化操控接口的未來(lái)趨勢。

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

圖1.電容式觸摸屏結構原理圖

試想一下在那些老套的用戶(hù)界面里,需要你把鼠標懸?;蛘哙]件點(diǎn)擊目標上才能獲得更多詳細的信息,而這些在手機設備上將不再起作用。如何擺脫這種慣用的設計呢?答案就是,創(chuàng )建移動(dòng)先行體驗。

二、觸控手勢的的使用情景(移動(dòng)的情景)

移動(dòng)情景指的是用戶(hù)使用時(shí)的環(huán)境和狀態(tài)——也就是任何可以影響用戶(hù)與設備進(jìn)行交互的內容。由于這些情境持續而快速地變化,對移動(dòng)設備而言就顯得尤為重要。我們要考慮用戶(hù)分心、多任務(wù)、手勢操作、低電量條件和糟糕的連接條件等復雜環(huán)境下的通用設計。

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

圖2.移動(dòng)中的互動(dòng)語(yǔ)境(出處:NadavSavio|GiantAntDesign)

各種移動(dòng)環(huán)境下會(huì )影響到用戶(hù)使用觸屏設備完成任務(wù)的效率和準確度的因素有:

– 移動(dòng)情景下,注意力容易被分散(如交談,觀(guān)察周?chē)h(huán)境等)

– 移動(dòng)情景下,操作手機的時(shí)間碎片化(各種事情打斷)

– 移動(dòng)情景下,任務(wù)容易被中斷(意外情況影響)

– 移動(dòng)情景下,肢體可能被其他物體被占用(如遛狗、拎包等)

– 移動(dòng)情景下,噪音分散注意力(車(chē)水馬龍、人聲鼎沸的路邊)

三、觸控手勢的基本操作

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

圖3.鋼鐵俠系列電影中的全息觸控交互

所謂自然手勢就是在真實(shí)物理世界中存在或演繹而來(lái)的手勢。例如上下滑動(dòng)滾動(dòng)列表,滑動(dòng)以平移等。這類(lèi)手勢是自然的,不需要或很少需要用戶(hù)去學(xué)習的。

– 長(cháng)按以查看更多操作(現在有了3DTouch,同長(cháng)按操作相比,最大區分是需要是有一定的按壓力度)

– 點(diǎn)擊執行主操作

– 滑動(dòng)以平移

– 輕掃以選定,并進(jìn)行命令操作

– 收縮和拉伸以縮放

– 轉動(dòng)以旋轉

– 邊緣輕掃以使用系統命令

四、好用的手勢是怎樣的?

首先我們來(lái)看看多點(diǎn)觸控的優(yōu)缺點(diǎn)。

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

那么什么是好用的手勢呢?

好用的手勢一來(lái)簡(jiǎn)單,二來(lái)支持單手操作,它們該如由Tweetie創(chuàng )始人LorenBrichter所開(kāi)發(fā)并獲得專(zhuān)利的“下拉刷新”一樣受歡迎?;蛘呦駃Book的翻頁(yè)動(dòng)作一樣自然簡(jiǎn)單。以下是好用的手勢該有的一些特征:

–簡(jiǎn)單易用。不僅動(dòng)作簡(jiǎn)單,還要能在擁擠的交通工具上單手操作

–容易記憶。其一手勢要好記,其二要讓人愿意記住

–符合認知習慣。也就是說(shuō),該手勢一方面要遵循人的自然習慣和意識,另一方面要契合手勢即將產(chǎn)生的操作

–實(shí)用。手勢要讓用戶(hù)感到舒服,少有用戶(hù)愿意點(diǎn)兩次才看到想看的東西,讓會(huì )讓他們感到麻煩

–愉悅的體驗。Winkler認為好的手勢會(huì )有神奇的感覺(jué)。UX總是個(gè)未知數,而且難于言傳。但這恰是我們認識、

享受科技的一種表現

–及時(shí)反饋。反饋就是說(shuō)用戶(hù)知道當前正在進(jìn)行的操作。用戶(hù)進(jìn)行完手勢操作后有明確的狀態(tài)信息告知

五、手勢設計應用過(guò)程中需要注意的點(diǎn):(手勢設計準則)

符合認知習慣

在非概念性項目中使用基礎手勢(組合)之外的“創(chuàng )新”手勢,未建立統一規范的情況下,使用混亂會(huì )導致用戶(hù)困惑,學(xué)習成本稿,增加記憶負擔,難以引導用戶(hù)培養使用習慣,技術(shù)上的限制可能會(huì )使“創(chuàng )新”變成不便。

最終使用者是人,手勢操作是基于人的行為來(lái)定義的。手勢操作是人們現實(shí)世界行為的映射,因此,手勢設計要符合大多數人的認知習慣,減少用戶(hù)的認知成本。比如有方向性的手勢操作,要盡量符合拇指的活動(dòng)方向,且要與認知相一致。

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

圖4.iBooks的翻頁(yè)體驗與翻實(shí)體書(shū)

記憶力限制

因為這些手勢操作不能明白的顯示在界面上,沒(méi)有代表動(dòng)作的可視元素,需要用戶(hù)記住哪種手勢對應的是哪些操作,一些不常用的手勢操作往往很難發(fā)現。如果手勢直觀(guān)常用自然沒(méi)問(wèn)題,而如果沒(méi)有“自然”的手勢去代表一個(gè)動(dòng)作,用戶(hù)就會(huì )感到困惑,于是便需要記憶,就像在使用命令行界面時(shí)要記住那些命令一樣。

一個(gè)App中手勢數量需保持在5個(gè)數量以下,多依賴(lài)與界面的引導和暗示,讓此類(lèi)用戶(hù)根據情境記憶這些手勢,從而增加手勢的易記憶性。

如果用戶(hù)對其缺乏認知,這些手勢操作就不易被發(fā)現,也便不會(huì )為人所用,甚至造成操作障礙。(壞的例子,找不到導航欄)

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

圖5.MozillaFirefox4版本右劃呼出Tab

不同應用場(chǎng)景采用不同的手勢設計

人們會(huì )在千奇百怪的環(huán)境中使用我們的產(chǎn)品,我們的產(chǎn)品在和周?chē)h(huán)境爭奪用戶(hù)的注意力,憑借一個(gè)3.5~5寸的屏幕與車(chē)水馬龍、人聲鼎沸的大千世界作斗爭,因此在實(shí)際的手勢設計中還需考慮該應用的使用場(chǎng)景。

效率型和實(shí)用型應用,這類(lèi)應用一般使用場(chǎng)景是在行進(jìn)間,考慮手機一般隨著(zhù)用戶(hù)的行進(jìn)而搖晃,操作效率以及誤操作等因素,一遍采用單手操作手機的手勢交互。

游戲等屏幕沉浸型應用,一般為休閑且穩定的操作環(huán)境,可以適當的設置一些復雜手勢配合游戲中的高級操作功能,增加游戲的操作樂(lè )趣。

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

圖6.Clear的手勢操作令人印象深刻

適度的應用手勢

2014年火得不能再火,一旦開(kāi)始玩根本停不下來(lái)的《Flappybird》。游戲以簡(jiǎn)單但有效的方式使用了基本的手勢。點(diǎn)擊或不點(diǎn)擊是唯一的操作手勢。玩家可以很快地知道應該使用什么手勢以及怎么利用手勢去進(jìn)行游戲。

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

圖7.FlappyBird游戲,玩家只需要用一根手指來(lái)操控

提供即時(shí)反饋

在用戶(hù)觸摸屏幕的時(shí)候,立即提供視覺(jué)提示,可提高用戶(hù)的信心。交互操作涉及到的元素可表現為改變顏色、改變大小或發(fā)生移動(dòng)/震動(dòng)。

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

圖8.3Dtouch的震動(dòng)反饋

使操作可逆

觸控互動(dòng)操作應該是可逆的。提供視覺(jué)反饋來(lái)表明當用戶(hù)抬起手指時(shí)會(huì )發(fā)生什么,同時(shí)允許用戶(hù)反悔,取消操作。這將使你的應用能夠安全地使用觸控操作進(jìn)行瀏覽。

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

圖9.Wechat取消發(fā)送語(yǔ)音

不要讓你的手勢觸發(fā)區域遠離拇指熱區(拇指法則)

JashClark在《觸動(dòng)人心-設計優(yōu)秀的iphone應用》一書(shū)中提到,拇指的活動(dòng)范圍對操作手機的效率以及正確度都有一定的影響。

雖然拇指能夠劃到整個(gè)屏幕,但拇指在所及范圍和靈活性上是有限的,只有三分之一的屏幕是真正容易觸及的——也就是拇指正對的區域。為了獲得舒適的人機體驗,應將主要點(diǎn)擊目標放置在方便拇指點(diǎn)擊的熱區內。

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

圖10.LukeWroblewski在《移動(dòng)為先》(MobileFirst)

保持手勢的全局性

不要讓用戶(hù)在你的應用中適應了你創(chuàng )造的手勢后,卻又在你的應用中碰壁。

如果用戶(hù)已經(jīng)習慣你的手勢,覺(jué)得你的手勢達到了方便快捷的目的,并耗費學(xué)習成本掌握并適應了你的手勢,那么便意味著(zhù)你成功了一半。盡量用簡(jiǎn)單的手勢完成常用功能,需要復雜手勢操作完成的功能,要有一個(gè)方便且更容易發(fā)現的方式相配合。盡量使用統一的手勢,減少不同手勢的切換頻率。

網(wǎng)頁(yè)制作中,如何設計好用的觸控手勢 微網(wǎng)站 哪個(gè)好

圖11.全局手勢在iOS原生應用中的使用場(chǎng)景

、

寫(xiě)在最后

好用的觸控手勢是人與設備、應用之間交流的方式。當初創(chuàng )造多點(diǎn)觸控技術(shù)的人,難能可貴的是細心洞察到了人們細膩的本真行為特征,轉而用觸屏這一行為自然的映射了出來(lái)。

參考引用:

Warmthen《給應用加入手勢操作需要注意的那些事兒》

NadavSavio《DesignSketch:TheContextofMobileInteraction》

RaniMolla《WhatMakesaGoodGestureControl》

來(lái)源:Tencent CDC

相關(guān)推薦

更多新聞